<template>
  <div>
    <div id="box1">
      <Topbar></Topbar>
    </div>
    <div id="cont">
      <img src="det01.png" alt="" class="img01" />
      <div class="box2">
        <div style="display: none">
          {{ xiaoli }}
        </div>
        <Detfu :arr1="arr1"></Detfu>
      </div>
      <div class="box333" v-for="(v,i) in 5" :key="i">
       <Detfuu v-for="(v,i) in arr2" :key="i" :tit2="v.tit2" :tit4="v.tit4"></Detfuu>
      </div>
      <div class="box4" style="width:100%;height:3rem">
         <Detfuuu tit1="推荐的豆列" tit2="更多"></Detfuuu>
            <img src="movie01.png" alt="" style=" width: 3rem;height: 1.7rem;">
      </div>

      <div></div>
    </div>
  </div>
</template>

<script>
import Topbar from "@/components/topbar.vue";
import { getlink } from "@/api/getapi.js";
import Detfu from "@/components/detfu.vue";
import Detfuu from "@/components/detfuu.vue";
import Detfuuu from "@/components/detfuuu.vue";

export default {
  components: {
    Topbar,
    Detfu,
    Detfuu,
     Detfuuu,
  },
  data() {
    return {
      arr: [],
      arr1: [],
      // detfuu的数据
       arr2 :[
      { tit2:"2017-03-01 19:30:40",tit4:"可以写读书笔记了，同时支持编辑。随时随地，摘录砰然心动的短路，写下阅读时的随感。写笔记吧，你..."},
     
    ]
    };
  },
  created() {
    getlink("/data/list/xiaoming").then((ok) => {
      console.log(ok.data.books);
      this.arr = ok.data.books;
    });
  },
  computed: {
    xiaoli() {
      return this.arr.map((item) => {
        if (item.id == this.$route.query.xi) {
          // console.log(item.title);
          this.arr1 = item;
          return item;
        }
      });
    },
  },
};
</script>

<style scoped>
#box1 {
  width: 100%;
  height: 0.8rem;
  position: fixed;
  top: 0px;
}
#box1 #nav {
  position: relative;
}
.img01 {
  width: 100%;
  height: 1rem;
}
#cont {
  width: 90%;
  height: auto;
  margin: 0.8rem auto;
  font-size: 0.16rem;
}
.box333{
  width:100%;
  height: 2rem;
  border-bottom:1px solid #665632;
}
</style>